<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="./ico/iconfont.css">
        <script type="text/javascript" src="./libs/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="./libs/jquery-ui-1.9.2.min.js"></script>
        <script type="text/javascript" src="./libs/d3.min.js"></script>
        <script type="text/javascript" src="./libs/jsplumb.js"></script>
		<style>
			body,ul{
				margin:0;
				padding:0;
			}
			.abs{
				position:absolute;
				width:200px;
				z-index:10000;
				background-color:rgba(227,244,255,.9);
				cursor:move!important;
			}
			.left {
				float:left;
				width:15%;
			}
			.left ul li{
				list-style-type:none;
				border:1px solid #289de9;
				border-radius: 15px;
				cursor:pointer;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden
			}
			.left ul li .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.left ul li .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.pDiv{
				float:left;
				width:83%;
				height:400px;
				border:5px solid rgb(255,0,0,0.1);
				overflow-y:scroll;
				position:relative;
				overflow-x:hidden;
			}

			.pane-node-content{

				border:1px solid #289de9;
				border-radius: 15px;
				cursor:move;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden;
				-webkit-transition: all .5s;
                -moz-transition: all .5s;
                -ms-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
				min-width:150px;

			}
			.pane-node-content:hover{
				background-color:rgba(227,244,255,.9);

			}
			.pane-node-content .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.pane-node-content .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.mycursor{
				cursor:crosshair;
			}
			.cursor-pointer{
				cursor:pointer;
			}
			.hide{
				border:1px solid red;
			}
			/*.aLabel {
				-webkit-transition: background-color 0.25s ease-in;
				-moz-transition: background-color 0.25s ease-in;
				transition: background-color 0.25s ease-in;
			}

			.aLabel.jtk-hover, .jtk-source-hover, .jtk-target-hover {
				background-color: #1e8151;
				color: white;
			}

			.aLabel {
				background-color: white;
				opacity: 0.8;
				padding: 0.3em;
				border-radius: 0.5em;
				border: 1px solid #346789;
				cursor: pointer;
			}*/

		</style>
	</head>
	<body>
	<div class='left'>
		<ul>
			<li>
			<span class="iconfont icon-dataBase"></span>
			 存储过程
			</li>
			<li>
			<span class="iconfont icon-SQLshujuji"></span>
			SQL脚本
			</li>
			<li>
			<span class="iconfont icon-icon-dian"></span>
			类型转换
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			 归一化
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			拆分
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			全表统计
			</li>
		</ul>
	</div>
	<div id="flow-panel" class="pDiv">

	</div>
	<script>
		var connDefaultPaintStyle = {stroke:'#999', strokeWidth:1}

        function addNode(parentId, nodeId, nodeLable, position) {
          var panel = d3.select("#" + parentId);
          var div = panel.append('div')
            .style('position','absolute')
            .style('top',position.y).style('left',position.x)
            .attr('align','center')
            .attr('id',nodeId).classed('pane-node-content',true);

          div.append('span').classed('iconfont icon-dataBase',true);
          div.append('span').text(nodeLable);
          div.append('span').classed('status icon-warning-o',true);

         /* var d = document.createElement("div");
        var id = jsPlumbUtil.uuid();
        d.className = "w";
        d.id = id;
        d.innerHTML = id.substring(0, 7) + "<div class=\"ep\"></div>";
        d.style.left = x + "px";
        d.style.top = y + "px";
        instance.getContainer().appendChild(d);*/

          return jsPlumb.getSelector('#' + nodeId)[0];
        }

        function addPorts(instance, node, ports, type) {
          //Assume horizental layout
          var number_of_ports = ports.length;
          var i = 0;
          var height = $(node).height();  //Note, jquery does not include border for height
          var x_offset = 1 / ( number_of_ports + 1);
          var x = 0;

          for ( ; i < number_of_ports; i++ ) {
            var anchor = [0,0,0,0];
            var paintStyle = { radius:5, fill:'#fff',stroke:'#999'};
            var isSource = false, isTarget = false;
            if ( type === 'output' ) {
              anchor[1] = 1;
              isSource = true;
            } else {
              isTarget =true;
            }

            anchor[0] = x + x_offset;
            x = anchor[0];

            instance.addEndpoint(node,{
              uuid:node.getAttribute("id") + "-" + ports[i],
			  endpoint:"Dot",
              paintStyle: paintStyle,
              anchor:anchor,
              maxConnections: isSource ? -1 : 1,
              isSource:isSource,
				connectionsDetachable:isTarget?true:false,
              isTarget:isTarget,

			  events: {
                  connected : function(){
					  this.setStyle({'display':'none'});
				  }
				}
            });
          }
        }



        function connMouseover(){
			connDefaultPaintStyle.strokeWidth = 5;
			this.setPaintStyle(connDefaultPaintStyle);
			// this.getOverlays().
		}

		function connMouseout(){
			connDefaultPaintStyle.strokeWidth = 1;
			this.setPaintStyle(connDefaultPaintStyle);
		}



        function connectPorts(instance, node1, port1, node2 , port2) {

          var uuid_source = node1.getAttribute("id") + "-" + port1;
          var uuid_target = node2.getAttribute("id") + "-" + port2;

          instance.connect({uuids:[uuid_source, uuid_target]});

        }

        jsPlumb.ready(function() {
            console.log("jsPlumb is ready to use");

            function initNode(el){
			instance.draggable(el);

			 instance.makeSource(el, {
				filter: ".ep",
				anchor: "Continuous",
				connectorStyle: { stroke: "#5c96bc", strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 4 },
				connectionType:"basic",
				extract:{
					"action":"the-action"
				},
				maxConnections: 2,
				onMaxConnections: function (info, e) {
					alert("Maximum connections (" + info.maxConnections + ") reached");
				}
			});

			instance.makeTarget(el, {
				dropOptions: { hoverClass: "dragHover" },
				anchor: "Continuous",
				allowLoopback: true
			});
		}

            //Initialize JsPlumb
             var color = "gray";
			var arrowCommon = { foldback:0.8, fillStyle:color, width:6, length:6 },
			  // use three-arg spec to create two different arrows with the common values:
			  overlays = [
				[ "Arrow", { location:1 }, arrowCommon ]
			  ];


            var instance = jsPlumb.getInstance({
              // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
              // than the curves on the first demo, which use the default curviness value.
              DragOptions : { cursor: "move", zIndex:2000 },
				Connector : [ "Bezier", { curviness:75 } ],
				PaintStyle: connDefaultPaintStyle,
				// Endpoint: ['Dot',{radius:5, fill:'#fff',stroke:'#999'}],
              // HoverPaintStyle : {strokeStyle:"#ccc", lineWidth:5 },
              // EndpointHoverStyle : {fillStyle:"#ccc" },
              Container:"flow-panel",
			  // ConnectionsDetachable  : false,
			  ConnectionOverlays: [
            [ "Arrow", {
                location: 1,
                id: "arrow",
                length: 14,
                foldback: 0.8
            } ]/*,
            [ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]*/
        ],
		      MaxConnections : -1
            });

            instance.registerConnectionType("basic", { anchor:"Continuous", connector:"StateMachine" });

            /*instance.bind("click", function (c) {
				instance.deleteConnection(c);
			});
  jsPlumb.on('#flow-panel', "dblclick", function(e) {
				var uid = new Date().getTime();
				addNode('flow-panel','node' + uid, 'node', {x:e.offsetX,y:e.offsetY})
			});

*/

			instance.bind("connection",function(info){
          		info.targetEndpoint.fire('connected');
          		console.log(info)
          		// ,events:{mouseover:connMouseover,mouseout:connMouseout}
				var conn = info.connection;
				conn.addClass('cursor-pointer');
				conn.bind('mouseover',connMouseover);
				conn.bind('mouseout',connMouseout);
			});

            //Handle drag and drop
            $('ul li').attr('draggable','true').on('dragstart', function(ev){
              //ev.dataTransfer.setData("text", ev.target.id);
              ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
              console.log('drag start');
            });

            $('#flow-panel').on('drop', function(ev){

              //avoid event conlict for jsPlumb
              if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
                  console.log('!!!!!!!')
                return;
              }

              ev.preventDefault();
              var mx = '' + ev.originalEvent.offsetX + 'px';
              var my = '' + ev.originalEvent.offsetY + 'px';

              console.log('on drop : ' + ev.originalEvent.dataTransfer.getData('text'));
              var uid = jsPlumbUtil.uuid();
              var node = addNode('flow-panel','node' + uid, 'node', {x:mx,y:my});
              addPorts(instance, node, ['out'],'output');
              addPorts(instance, node, ['in1','in2'],'input');
              instance.draggable($(node));
            }).on('dragover', function(ev){
              ev.preventDefault();
              console.log('on drag over');
            });

            instance.doWhileSuspended(function() {

              var node1 = addNode('flow-panel','node1', 'node1', {x:'80px',y:'20px'});
              var node2 = addNode('flow-panel','node2', 'node2', {x:'280px',y:'20px'});

              // initNode(node1)
              // initNode(node2)
              addPorts(instance, node1, ['out1','out2'],'output');
              addPorts(instance, node2, ['in','in1','in2'],'input');

              connectPorts(instance, node1, 'out2', node2, 'in');

              instance.draggable($('.pane-node-content'));


            });

            jsPlumb.fire("jsFlowLoaded", instance);

        });



    </script>
	</body>
</html>